<template>
<div>
  <h2>ShowInfo:{{info}}</h2>
  <button v-on:click="info.name='kobe'">ShowInfo按钮</button>

  <button @click="showInfoBtnClick">ShowInfo按钮</button>

  <hr>
  <h2>ShowInfo:{{roInfo}}</h2>
  <button @click="roInfo.name='james'">roInfo按钮</button>
  <button @click="roInfoBtnClick">roInfo按钮</button>
</div>
</template>

<script>
export default {
  name: "ShowInfo",
  props:{
    info:{
      type:Object,
      default:()=>({})
    },
    roInfo:{
      type:Object,
      default:()=>({})
    }
  },
  emits:['changeInfoName','changeRoInfoName'],
  setup(props,context){

    function showInfoBtnClick(){
      context.emit('changeInfoName','ding')
    }

    function roInfoBtnClick(){
      context.emit('changeRoInfoName','james')
    }

    return{
      showInfoBtnClick,
      roInfoBtnClick
    }

  }
}
</script>

<style scoped>

</style>